class EnlargeBox{
  constructor(select){
      this.select=document.querySelector(select)
      this.show=this.select.querySelector(".show")
      this.list=this.select.querySelector(".list")
      this.enlarge=this.select.querySelector(".enlarge")
      this.show_width=this.show.clientWidth
      this.show_height=this.show.clientHeight
      this.show_boxW=parseInt(window.getComputedStyle(this.show.lastElementChild).width)
      this.show_boxH=parseInt(window.getComputedStyle(this.show.lastElementChild).height)
      this.big_imgW = parseInt(window.getComputedStyle(this.enlarge.lastElementChild).width)
      this.big_imgH = parseInt(window.getComputedStyle(this.enlarge.lastElementChild).height)
      this.show_box=this.show.querySelector("div")
      // console.log(this.enlarge.firstElementChild.clientWidth)
      this.setScale()
      this.overout()
      this.showMove()
      this.changeImg()
  }
  setScale(){
      // console.log(this.big_imgW)
      this.enlarge_width=this.big_imgW*this.show_boxW/this.show_width+"px"
      this.enlarge_height=this.big_imgH*this.show_boxH/this.show_height+"px"
      this.enlarge.style.width=(this.big_imgW*this.show_boxW)/this.show_width+"px"
      this.enlarge.style.height=(this.big_imgH*this.show_boxH)/this.show_height+"px"
    //   this.enlarge.style.width=510+"px"
    //   this.enlarge.style.height=510+"px"
      
  }
  showMove(){
      // console.log("aaa")
      this.show.addEventListener("mousemove",e => {
          // this.show_boxW=this.show_box.offsetWidth
          // this.show_boxH=this.show_box.offsetHeight
          this.show_box.style.top=e.offsetY-this.show_boxH/2+"px"
          this.show_box.style.left=e.offsetX-this.show_boxW/2+"px"
          if(parseInt(this.show_box.style.top)<=0)this.show_box.style.top=0;
          if(parseInt(this.show_box.style.left)<=0)this.show_box.style.left=0;
          if(parseInt(this.show_box.style.top)>=(this.show_height-this.show_boxH))this.show_box.style.top=this.show_height-this.show_boxH+"px";
          if(parseInt(this.show_box.style.left)>=(this.show_width-this.show_boxW))this.show_box.style.left=this.show_width-this.show_boxW+"px"; 
          this.enlarge.lastElementChild.style.left=-(parseInt(this.show_box.style.left)*this.big_imgW/this.show_width)+"px"
          this.enlarge.lastElementChild.style.top=-(parseInt(this.show_box.style.top)*this.big_imgW/this.show_width)+"px"
          // console.log(this.enlarge.lastElementChild.style.left)
          // console.log(this.big_imgW)
      })
      
  }
  
  overout(){
      this.show.addEventListener("mouseover",(e) => {
          this.show_box.style.display="block"
          this.enlarge.style.display="block"
          // console.log(this.enlarge.style.display)

      })
      this.show.addEventListener("mouseout",() => {
          this.show_box.style.display="none"
          this.enlarge.style.display="none"
          
      })
  }
  changeImg(){
     this.list.addEventListener("click",e=>{
      //    console.log("aaa")
         if(e.target.nodeName==="IMG"){
          //    console.log(e.target)
          //    console.log(this.show)
              this.show.querySelector("img").src=e.target.dataset.show
              // this.show.firstElementChild.src=e.target.dataset.show
              this.enlarge.firstElementChild.src=e.target.dataset.enlarge
              for(let i=0;i<this.list.children.length;i++){
                  this.list.children[i].classList.remove("active")
              }
              e.target.classList.add("active")
              // console.log(this.list.children)
         }
     })
  }
}

// document.children
// let e1=new EnlargeBox("#more")